<template>
	<view class="outside" @click="handlerClick(index)">
		<view :class="statusUp">
			<view class="date">{{dateStr}}</view>
			<view class="time">{{timeStr}}</view>
		</view>
		<view :class="statusDown">
			<view class="num">余票：{{num}}</view>
			<view class="status">{{statusString}}</view>
		</view>
	</view>
</template>

<script>
	import {
		dateToString
	} from '../../js_sdk/date-parse/date-parser.js'
	export default {
		props: {
			date: Number,
			index: Number,
			status: Number,
			timeStr: String,
			num: Number
		},
		watch: {
			status() {
				this.statusUp = this.status == 1 ? 'up checked' : 'up'
				this.statusDown = this.status == 2 ? 'down off' : 'down'
			}
		},
		data() {
			return {
				dateStr: dateToString(new Date(this.date), 'yyyy年MM月dd日'),
				statusUp: this.status == 1 ? 'up checked' : 'up',
				statusDown: this.status == 2 ? 'down off' : 'down on',
				statusString: this.status == 2 ? '已约满' : '空闲',
			}
		},
		methods: {
			handlerClick(index) {
				if (this.status != 2) {
					this.$emit('timingChange', index)
				}
			}
		}
	}
</script>

<style>
	.outside {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: auto;
	}

	.up {
		padding: 10rpx 0;
		width: calc(100% - 4rpx);
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		border-radius: 5rpx 5rpx 0 0;
		border-top: 2rpx solid #B9AC90;
		border-left: 2rpx solid #B9AC90;
		border-right: 2rpx solid #B9AC90;
		color: #666;
	}

	.up .date {
		font-size: 28rpx;
		line-height: 40rpx;
	}

	.up .time {
		font-size: 28rpx;
		line-height: 40rpx;
	}

	.down {
		border: 2rpx solid #B9AC90;
		width: calc(100% - 4rpx);
		padding: 10rpx 0;
		background: #FBE6D0;
		border-radius: 0 0 5rpx 5rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.down .num {
		color: #666;
		font-size: 28rpx;
		line-height: 40rpx;
	}

	.down .status {
		color: #666;
		line-height: 40rpx;
		font-size: 28rpx;
	}

	.checked {
		color: #fff !important;
		border: 0 !important;
		width: 100% !important;
		background: #B9AC90 !important;
	}

	.off {
		background: #ddd !important;
	}
</style>
